<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>index</title>
    <link type="text/css" href="style/index.css" rel="stylesheet"/>
    <link type="text/css" rel="stylesheet" href="style/style.css"/>
</head>
<body>
<!--头部-->
<div id="header">
    <div class="inner">
        <div class="logo"><a href="#"><img src="images/logo.png" alt="logo"/></a></div>
        <ul class="nav">
            <li><a class="a_hover" href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="features.html">Features</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <div class="nav_pic">
            <ul>
                <li><a class="nav_bg1" href="#"></a></li>
                <li><a class="nav_bg2" href="#"></a></li>
                <li><a class="nav_bg3" href="#"></a></li>
                <li><a class="nav_bg4" href="#"></a></li>
                <li><a class="nav_bg5" href="#"></a></li>
                <li><a class="nav_bg6" href="#"></a></li>
            </ul>
        </div>
    </div>

</div>
<!--广告栏-->
<div id="banner">
    <div class="inner">
        <div class="banner_l">
            <p>WELCOME</p>
            <p class="w_265">TO THE</p>
            <p>STUDEON</p>
            <ul class="choose">
                <li><a class="bg" href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div class="banner_r"><img src="images/slide1.png" alt=""/></div>

    </div>

</div>
<!--主体-->
<div id="main">
    <div class="inner">
        <div class="main_t">
            <div class="pic_txt">
                <div class="picTxt_l">
                    <div class="picTxt_t">
                        <a href="#"></a>
                        <div class="txt">
                            <h4>EVENTS PLANNING</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                        </div>
                    </div>
                    <div class="picTxt_t">
                    <a class="a_bg1" href="#"></a>
                    <div class="txt">
                        <h4>EVENTS PLANNING</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                    </div>
                </div>
                </div>
                <div class="picTxt_l">
                    <div class="picTxt_t">
                        <a class="a_bg2" href="#"></a>
                        <div class="txt">
                            <h4>EVENTS PLANNING</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                        </div>
                    </div><div class="picTxt_t">
                    <a class="a_bg3" href="#"></a>
                    <div class="txt">
                        <h4>EVENTS PLANNING</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                    </div>
                </div>
                </div>
                <div class="picTxt_l">
                    <div class="picTxt_t">
                        <a class="a_bg4" href="#"></a>
                        <div class="txt">
                            <h4>EVENTS PLANNING</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                        </div>
                    </div><div class="picTxt_t">
                    <a class="a_bg5" href="#"></a>
                    <div class="txt">
                        <h4>EVENTS PLANNING</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
                    </div>
                </div>
                </div>
            </div>
            <div class="txt_btn">
                <div class="btn_txt">
                    <h5>HI THERE. I AM A THEME, WITH ATTITUDE. I AM ALSO RESPONSIVE, EASY DO EDIT. WHY DON'T YOU TRY ME ?</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</p>
                </div>
                <a href="#">BUY NOW !</a>
            </div>
        </div>
        <div class="main_c">
            <div class="main_pro">
                <h3>THE PORTFOLIO</h3>
                <div class="pro_txt">
                    <div class="pro_l">
                        <div class="pro_pic">
                            <div class="pro_box">
                                <img src="images/p1.jpg" alt=""/>
                                <div class="pic_pos">
                                    <a class="pic_Web" href="#">WEB DESIGN</a>
                                    <a class="pic_icon1" href="#"></a>
                                    <a class="pic_icon" href="#"></a>
                                </div>
                            </div>
                            <h4>I AM AN AMAZING PROJECT</h4>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
                    </div>
                </div>
                <div class="pro_txt">
                    <div class="pro_l">
                        <div class="pro_pic">
                            <div class="pro_box">
                                <img src="images/p2.jpg" alt=""/>
                                <div class="pic_pos">
                                    <a class="pic_Web" href="#">WEB DESIGN</a>
                                    <a class="pic_icon1" href="#"></a>
                                    <a class="pic_icon" href="#"></a>
                                </div>
                            </div>
                            <h4>I AM AN AMAZING PROJECT</h4>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
                    </div>
                </div>
                <div class="pro_txt">
                    <div class="pro_l">
                        <div class="pro_pic">
                            <div class="pro_box">
                                <img src="images/p3.jpg" alt=""/>
                                <div class="pic_pos">
                                    <a class="pic_Web" href="#">WEB DESIGN</a>
                                    <a class="pic_icon1" href="#"></a>
                                    <a class="pic_icon" href="#"></a>
                                </div>
                            </div>
                            <h4>I AM AN AMAZING PROJECT</h4>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
                    </div>
                </div>
                <div class="pro_txt last">
                    <div class="pro_l">
                        <div class="pro_pic">
                            <div class="pro_box">
                                <img src="images/p4.jpg" alt=""/>
                                <div class="pic_pos">
                                    <a class="pic_Web" href="#">WEB DESIGN</a>
                                    <a class="pic_icon1" href="#"></a>
                                    <a class="pic_icon" href="#"></a>
                                </div>
                            </div>
                            <h4>I AM AN AMAZING PROJECT</h4>
                        </div>
                        <p>Lorem ipsum dolor sit amet,<br/> consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
                    </div>
                </div>
            </div>
            <div class="worries">
                <h5>SUBSCRIBE TO OUR NEWSLETTER. WE HATE SPAM AS MUCH AS YOU DO, SO NO WORRIES.</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis nulla vel dolor ultrices sit amet.</p>
            </div>
        </div>
        <div class="main_b">
            <div class="blog">
                <h4>OUR BLOGGY</h4>
                <div class="jan_24">
                    <div class="pic_box">
                        <img src="images/b1.jpg" alt="" />
                        <div class="box_pos">
                            <a class="pic_icon1" href="#"></a>
                            <a class="pic_icon" href="#"></a>
                        </div>
                    </div>
                    <h6>JUST A COOL BLOG POST TITLE HERE.</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a class="more" href="#">Read more<span></span></a>
                </div>
                <div class="jan_24">
                    <div class="pic_box">
                        <img src="images/b2.jpg" alt="" />
                        <div class="box_pos">
                            <a class="pic_icon1" href="#"></a>
                            <a class="pic_icon2" href="#"></a>
                        </div>
                    </div>
                    <h6>JUST A COOL BLOG POST TITLE HERE.</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a class="more" href="#">Read more<span></span></a>
                </div>
            </div>
            <div class="test">
                <h4>TESTIMONIALS</h4>
                <div class="test_pic">
                    <img src="images/t1.jpg" alt=""/>
                    <h5>VERY PLEASED WITH THE COOL SERVICES PROVIDED.</h5>
                    <h6>Linda Scott / Webdesigner <a href="#">http://www.mywebsite.com</a></h6>
                    <div class="testTxt_bg">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.
                        </p>
                    </div>
                </div>
                <div class="test_pic">
                    <img src="images/p3.jpg" alt=""/>
                    <h5>VERY PLEASED WITH THE COOL SERVICES PROVIDED.</h5>
                    <h6>Linda Scott / Webdesigner <a href="#">http://www.mywebsite.com</a></h6>
                    <div class="testTxt_bg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit amet. turpis.</p></div>
                </div>
            </div>
        </div>
    </div>
</div>





<!--底部-->
<div id="footer">
    <div class="footer_t">
        <div class="inner">
            <div class="footer_abo">
                <h3>ABOUT STUDEON</h3>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis. </p>

            </div>
            <div class="footer_abo">
                <h3>THE TAGS</h3>
                <div class="tags"><a href="#">Awesome</a><a href="#">Strategy</a><a href="#">Photography</a><a href="#">Development</a><a href="#">Css</a><a href="#">photoshop</a>
                <a href="#">Html</a><a href="#">Awesome</a><a href="#">Strategy</a><a href="#">Photoshop</a><a href="#">Html</a></div>
            </div>

            <div class="footer_abo">
                <h3>LATEST TWEETS</h3>
                <div class="tweets">
                    <p>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p>
                    <h5>ABOUT 15 MINS</h5>
                </div>
                <div class="tweets">
                    <p>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p>
                    <h5>ABOUT 15 MINS</h5>
                </div>
    
            </div>
            <div class="footer_abo">
                <h3>FLICKR FEED </h3>
                <a href="#"><img src="images/f1.png" alt=""/></a><a href="#"><img src="images/f2.png" alt=""/></a>
                <a href="#"><img src="images/f3.png" alt=""/></a><a href="#"><img src="images/f4.png" alt=""/></a>
                <a href="#"><img src="images/f1.png" alt=""/></a><a href="#"><img src="images/f2.png" alt=""/></a>
            </div>
        </div>
    </div>
    <div class="footer_b">
        <div class="inner">
            <div class="footer_logo"><a href="#"><img src="images/logo2.png" alt=""/></a></div>
            <p>Copyright &copy; 2015 All rights Reserved | Template by  <span>W3layouts</span><a href="#"><img src="images/move-top.png" alt="" /></a></p>
        </div>
    </div>

</div>
</body>
</html>